<template>
  <button @click="btnClick">点击{{ count }}</button>
  <br />
  父组件穿过来的msg属性：{{ msg }}
  <hr />
  子组件注册的插槽
  <slot></slot>
  <hr />
</template>

<script>
import { ref } from 'vue'
export default {
  // 1.setup的参数props
  // 1.父组件传递过来的参数
  // 原本的props属性还得写
  // 2.setup的参数context
  //   3.setup函数内部不能使用this
  props: ['msg'],
  setup(props, context) {
    const { attrs, emit, slots } = context
    // 1.注册过的属性在props里面
    console.log(props)
    // 2.未注册的属性在attrs里面
    console.log(attrs)
    // 3.插槽
    console.log(slots)
    // 4.发送事件的emit
    console.log(emit)

    const { msg } = props
    const count = ref(0)
    const btnClick = () => {
      count.value += 1
    }
    return {
      count,
      btnClick,
      msg,
    }
  },
}
</script>
<style scoped></style>
